<template>
  <div class="case_manage" v-if="!is_create">
    <div class="operation">
      <el-button type="primary" style="padding: 10px 15px; margin: 0 3px 0 0" @click="switch_status">添加用例</el-button>
    </div>
    <el-dialog title="修改用例" :visible.sync="dialogTableVisible">
      <el-form :model="modifyForm" :rules="modify" ref="modifyForm" label-width="150px" class="demo-ruleForm">
        <el-form-item label="用例名称" prop="case_name" style="width: 400px">
          <el-input v-model="modifyForm.case_name" clearable></el-input>
        </el-form-item>
        <el-form-item label="用例文件名" prop="case_file_name" style="width: 500px">
          <el-input type="textarea" v-model="modifyForm.case_file_name" clearable></el-input>
        </el-form-item>
        <el-form-item label="备注信息" prop="remarks" style="width: 500px;">
          <el-input type="textarea" v-model="modifyForm.remarks"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitModifyForm('modifyForm')" v-if="!modify_status">提交</el-button>
          <el-button type="primary" :loading="true" @click="submitModifyForm('modifyForm')" v-else>提交</el-button>
          <el-button @click="resetForm('modifyForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <div class="tables">
      <el-table
          class="table-css"
          ref="multipleTable"
          :data="this.tableData"
          stripe
          height="calc(100vh - 180px)"
          @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
            prop="case_name"
            label="用例名称"
            width="160"
            fixed>
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间" width="200">
          <template slot-scope="scope">
            <span>{{ time_format(scope.row.create_time) }} </span>
          </template>
        </el-table-column>
        <el-table-column prop="modify_time" label="更新时间" width="200">
          <template slot-scope="scope">
            <span>{{ time_format(scope.row.modify_time) }} </span>
          </template>
        </el-table-column>
        <el-table-column prop="case_file_name" label="用例文件名" width="380"/>
        <el-table-column prop="remarks" label="备注" width="260"/>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button @click="my_modify(scope.row)" type="text" size="small">修改</el-button>
            <el-button @click="my_delete(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="base_bottom">
        <div class="my_select_button">
          <el-button type="primary" style="padding: 10px 15px; margin: 0 3px 0 0" @click="select_all">全选</el-button>
          <el-button type="primary" style="padding: 10px 15px; margin: 0 3px 0 0" @click="delete_all">全部删除</el-button>
        </div>
        <div class="my-pagination">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page=this.currentPage
              :page-sizes=this.pagesizes
              :page-size=this.pagesize
              layout="total, sizes, prev, pager, next, jumper"
              :total=this.total>
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
  <div class="box" v-else>
    <i class="el-icon-circle-close go-back" @click="switch_status"></i>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
      <el-form-item label="用例名称" prop="case_name" style="width: 400px">
        <el-input v-model="ruleForm.case_name" clearable></el-input>
      </el-form-item>
      <el-form-item label="用例文件名" prop="case_file_name" style="width: 600px">
        <el-input type="textarea" v-model="ruleForm.case_file_name" clearable></el-input>
      </el-form-item>
      <el-form-item label="备注信息" prop="remarks" style="width: 600px;">
        <el-input type="textarea" v-model="ruleForm.remarks"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')" v-if="!add_status">立即创建</el-button>
        <el-button type="primary" :loading="true" @click="submitForm('ruleForm')" v-else>立即创建</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {get_case, add_case, modify_case, delete_case} from "@/js/case_manage";
import "../my_constants"
import ElementUI from "element-ui";

export default {
  name: "CaseManage",
  beforeMount() {
    // 提前获取详情
    get_case(1, 20).then(response => {
      if (!response) {
        return
      }
      this.tableData = response.data.data;
      this.total = response.data.total;
    })
  },
  data() {
    return {
      dialogTableVisible: false,
      is_create: false,
      total: 0, //默认数据总数
      pagesizes: [10, 20, 50],//每页的数据条数
      pagesize: 10,//每页的数据条数
      currentPage: 1,
      tableData: [],
      multipleSelection: [],
      // 创建用户相关
      add_status: false, // 点击提交后不能再次点击
      ruleForm: {
        case_name: '',
        case_file_name: '',
        remarks: '',
      },
      rules: {
        case_name: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
        ],
        case_file_name: [
          {required: true, message: '请输入用例文件名', trigger: 'blur'},
        ],
      },
      // 修改操作
      modify_status: false, // 点击提交后不能再次点击
      modifyForm: {
        case_name: '',
        case_file_name: '',
        remarks: '',
      },
      modify: {
        case_name: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
        ],
        case_file_name: [
          {required: true, message: '请输入用例文件名', trigger: 'blur'},
        ],
      }
    }
  },
  methods: {
    // 添加用户
    switch_status() {
      if (!this.is_create) {
        this.is_create = true;
      } else {
        this.is_create = false;
      }
    },
    // 刷新操作
    reload_data() {
      setTimeout(() => {
        get_case(this.currentPage, this.pagesize).then(response => {
          this.tableData = response.data.data;
          this.total = response.data.total;
        })
      }, 400)
    },
    // 分页器相关
    // 当前页数
    handleSizeChange(val) {
      this.pagesize = val;
      this.currentPage = 1;
      this.reload_data()
    },
    // 每页显示条数
    handleCurrentChange(val) {
      this.currentPage = val;
      this.reload_data()
    },
    // 取消全选
    toggleSection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggRowSelection(row);
        });
      } else {
        this.$ref.multipleSelection.clearSelection();
      }
    },
    // 点击全选或选择框时出发
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 全选
    select_all() {
      this.$refs.multipleTable.toggleAllSelection();
    },
    // 时间显示格式
    time_format(time) {
      let year = new Date(time).getFullYear();
      let month = new Date(time).getMonth() + 1 < 10 ? "0" + (new Date(time).getMonth() + 1) : new Date(time).getMonth() + 1;
      let date = new Date(time).getDate() < 10 ? "0" + new Date(time).getDate() : new Date(time).getDate();
      let hh = new Date(time).getHours() < 10 ? "0" + new Date(time).getHours() : new Date(time).getHours();
      let mm = new Date(time).getMinutes() < 10 ? "0" + new Date(time).getMinutes() : new Date(time).getMinutes();
      let ss = new Date(time).getSeconds() < 10 ? "0" + new Date(time).getSeconds() : new Date(time).getSeconds();
      return year + "-" + month + "-" + date + "-" + " " + hh + ":" + mm + ':' + ss;
    },
    // 修改
    my_modify(val) {
      this.dialogTableVisible = true;
      this.modifyForm = val
    },
    // 删除
    my_delete(val) {
      if (!val) {
        return
      }
      // 确认
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delete_case(val).then(response => {
        });
        // 设置延迟，实现组件刷新
        setTimeout(() => {
          this.reload_data()
        }, 300)
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 批量删除
    delete_all() {
      if (!this.multipleSelection.length) {
        return
      }
      // 确认
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delete_case(this.multipleSelection).then(response => {
        });
        // 设置延迟，实现组件刷新
        setTimeout(() => {
          this.reload_data()
        }, 300)
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    // 创建用户相关
    submitForm(formName) {
      this.add_status = true
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = JSON.parse(JSON.stringify(this.ruleForm))
          add_case(params).then(response => {
            if (response.data.status == 'success') {
              ElementUI.Message({
                showClose: true,
                message: '添加成功!',
                type: 'success'
              });
              // 清空
              this.resetForm(formName)
              // 刷新
              this.reload_data()
              // 退出
              this.switch_status()
              this.add_status = false
            } else {
              ElementUI.Message({
                showClose: true,
                message: response.data.message,
                type: 'error'
              });
            }
          })
        } else {
          ElementUI.Message({
            showClose: true,
            message: '创建失败， 请确认参数填写确认再提交',
            type: 'error'
          });
          return false;
        }
      });
    },
    // 更改
    submitModifyForm(formName) {
      this.modify_status = true
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let params = JSON.parse(JSON.stringify(this.modifyForm))
          modify_case(params).then(response => {
            if (response.data.status == 'success') {
              ElementUI.Message({
                showClose: true,
                message: '更改成功',
                type: 'success'
              });
              this.resetForm(formName)
              this.dialogTableVisible = false;
              this.modify_status = false;
              this.reload_data()
            } else {
              ElementUI.Message({
                showClose: true,
                message: response.data.message,
                type: 'error'
              });
            }
          })
        } else {
          ElementUI.Message({
            showClose: true,
            message: '更改失败, 请确认参数填写确认再提交',
            type: 'error'
          });
          return false;
        }
      });
    },
    // 清空内容
    resetForm(formName) {
      this.add_status = false;
      this.modify_status = false
      this.$refs[formName].resetFields();
    },
  },
}
</script>

<style scoped>
.case_manage {
  padding: 10px;
  width: 100%;
}

.operation {
  margin-bottom: 20px;
}

.my_select_button {
  float: left;
}

.my-pagination {
  float: right;
  font-size: 14px;
  margin-right: 20px;
}

.base_bottom {
  margin: 10px 0;
  height: 40px;
}

/* 创建用户 */
.box {
  margin: 10px;
  padding: 5px;
  box-shadow: 10px 10px 20px #888888
}

/* 返回按钮 */
.go-back {
  float: right;
  font-size: 22px;
  padding: 5px;
  color: #c4bbbb;
}

.go-back:hover {
  color: #868181;
}
</style>